<template>
  <div class="member-list">
    <!--    系统设置-部门员工-->
    <BasicTable @register="registerTable">
      <template #toolbar>
        <Button :type="'primary'" @click="handleAdd">新增</Button>
      </template>
      <template #departmentPosition="{ text }">
        <div v-for="item in text || []" :key="item['positionId']">
          {{ departmentPositionText(item) }}
        </div>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '移除',
              color: 'error',
              onClick: handleDel.bind(null, record['id']),
            },
            {
              label: '分配角色',
              onClick: handlePosition.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>

    <EditModal @register="registerModal" @success="handleSuccess" />

    <PositionModal @register="registerPositionModal" @success="handlePositionOk" />
  </div>
</template>

<script setup lang="ts">
  import EditModal from './modal.vue';
  import { Button } from 'ant-design-vue';
  import mcApi from 'mc-c2b2m-operator-api';
  import { useModal } from '@/components/Modal';
  import PositionModal from './positionModal.vue';
  import { useMessage } from '@/hooks/web/useMessage';
  import { tableColumns, tableFormSchema } from './data';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { computed } from 'vue';

  const { SystemModule } = mcApi;
  const { OrgApi } = SystemModule;

  const [registerTable, { reload }] = useTable({
    striped: false,
    bordered: false,
    canResize: false,
    useSearchForm: true,
    columns: tableColumns,
    showIndexColumn: false,
    showTableSetting: false,
    indexColumnProps: { width: 250 },
    api: OrgApi.getOrgMemberPage,
    formConfig: {
      labelWidth: 120,
      schemas: tableFormSchema,
    },
    actionColumn: {
      width: 250,
      title: '操作',
      fixed: 'right',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  const departmentPositionText = computed(() => {
    return (data: any) => {
      const { positionName, departmentName } = data;
      return departmentName + '-' + positionName;
    };
  });

  const { createConfirm, createMessage } = useMessage();

  const [registerModal, { openModal, closeModal }] = useModal();
  function handleAdd() {
    openModal(true, {});
  }
  function handleSuccess() {
    closeModal();
    reload();
  }

  const [registerPositionModal, { openModal: openPositionModal, closeModal: closePositionModal }] =
    useModal();
  function handlePosition(record: any) {
    openPositionModal(true, record);
  }
  function handlePositionOk() {
    closePositionModal();
    reload();
  }

  function handleDel(id: string) {
    createConfirm({
      title: '提示',
      iconType: 'warning',
      content: `是否确认移除？`,
      onOk: async () => {
        await OrgApi.removeOrgMember(id);
        createMessage.success('移除成功！');
        await reload();
      },
    });
  }
</script>

<style scoped lang="scss">
  :deep(.ant-table-thead > tr > th) {
    background: #fff;
  }
</style>
